<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>登录</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <script type="text/javascript" src="/statics/js/custom/login_base.js"></script>
    <style>
        .login-box {
            background-color: rgba(255, 255, 255, .25);
        }

        .login-box p:last-child {
            margin-bottom: 0px;
        }

        .login-form .form-control {
            background: rgba(0, 0, 0, 0.3);
            color: #fff;
        }

        .login-form .has-feedback {
            position: relative;
        }

        .login-form .has-feedback .form-control {
            padding-left: 36px;
        }

        .login-form .has-feedback .mdi {
            position: absolute;
            top: 0;
            left: 0;
            right: auto;
            width: 36px;
            height: 36px;
            line-height: 36px;
            z-index: 4;
            color: #dcdcdc;
            display: block;
            text-align: center;
            pointer-events: none;
        }

        .login-form .has-feedback.row .mdi {
            left: 15px;
        }

        .login-form .form-control::-webkit-input-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-form .form-control:-moz-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-form .form-control::-moz-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-form .form-control:-ms-input-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-form .custom-control-label::before {
            background: rgba(0, 0, 0, 0.3);
            border-color: rgba(0, 0, 0, 0.1);
        }

        .help-block {
            color: red;
        }

        /* 添加扫码 */
        .login-box {
            padding: 30px 80px;
        }

        .login-box .loginContent {
            display: flex;
            margin: 30px 0;
            height: 330px;
        }

        .login-box .loginContent .leftScan {
            height: 260px;
            padding-right: 80px;
            margin-right: 80px;
            padding-bottom: 10px;
            width: 380px;
            box-sizing: border-box;
            text-align: center;
            display: none;
            color: #fff;
        }

        .login-box .loginContent .leftScan .title {
            font-size: 22px;
        }

        .login-box .loginContent .leftScan .scanBox {
            width: 195px;
            height: 195px;
            border: 1px solid #e5e8ec;
            border-radius: 8px;
            margin: 0 auto;
            position: relative;
            background: #ffffff;
        }

        .login-box .loginContent .leftScan .scanBox .scanImg {
            margin: 14px;
            width: 167px;
            height: 167px;
            background: #000;
        }

        .login-box .loginContent .leftScan .scanBox .refresh {
            position: absolute;
            top: 14px;
            left: 14px;
            background: hsla(0, 0%, 100%, .95);
            width: 170px;
            height: 170px;
            color: #000;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .login-box .loginContent .leftScan .scanBox .refresh .but {
            width: 94px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            border: 1px solid rgba(0, 0, 0, .2);
            margin: 20px auto;
            border-radius: 21px;
            cursor: pointer;
        }

        .login-box .loginContent .leftScan .appOpen{
            font-size: 12px;
            margin-top: 15px;
        }

        .login-box .loginContent .leftScan .appOpen span{
            color: var(--background-theme);
        }

        /* 登录切换 */
        .loginSwitch{
            font-size: 22px;
            display: flex;
            color: #fff;
            margin-bottom: 14px;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .loginSwitch .switchBut{
            padding: 0 20px;
        }

        .loginSwitch .active{
            color: var(--background-theme);
        }

        @media (max-width: 950px) {
            .login-box .loginContent .leftScan {
                display: none !important;
            }
        }
    </style>
</head>

<body class="center-vh" style="background-image: url(/statics/images/login_bg.jpg); background-size: cover;">

<div class="login-box">
    <div class="text-center mb-3">
        <h3 style="color: #FFFFFF;">后台管理系统</h3>
    </div>
    <div class="loginContent">
        <form action="" id="loginForm" method="post" class="login-form" style="width: 320px;">
            <div class="loginSwitch">
                <div class="switchBut active" data-show="accountDiv">密码登录</div>
                <div style="width: 1px;height: 16px;background:#f2f2f2;"></div>
                <div class="switchBut" data-show="scanDiv">扫码登录</div>
            </div>
            <div id="accountDiv">
                <div class="mb-3 has-feedback mx_validator" >
                    <span class="mdi mdi-account" aria-hidden="true"></span>
                    <input type="text" class="form-control mx_validator mx_required" mx_required_msg="用户名不能为空"
                           id="userName" name="userName" placeholder="用户名">
                </div>

                <div class="mb-3 has-feedback mx_validator">
                    <span class="mdi mdi-lock" aria-hidden="true"></span>
                    <input type="password" class="form-control mx_required" mx_required_msg="密码不能为空" id="password"
                           name="password" placeholder="密码">
                </div>

                <div class="mb-3" style="margin-top: 32px;margin-bottom: 32px;">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="jizhu">
                        <label class="custom-control-label not-user-select text-white" for="jizhu">记住用户名,密码</label>
                    </div>
                </div>
                <div class="mb-3 d-grid">
                    <button class="btn btn-block btn-primary mx_validator_button" id="loginSubmit" type="button">立即登录
                    </button>
                </div>
            </div>
            <div class="leftScan" id="scanDiv">
                <div class="scanBox">
                    <div class="scanImg">
                        <div id="qrcode"></div>
                    </div>
                    <div class="refresh" id="refresh" style="display: none;">
                        <div>二维码已失效</div>
                        <div class="but">刷新</div>
                    </div>
                    <div class="refresh scaned" id="scaned" style="display: none;">
                        <div>扫码成功，请在手机上确认登录</div>
                    </div>
                    <div class="refresh loginSuccess" id="loginSuccess" style="display: none;">
                        <div>登录成功</div>
                    </div>
                    <div class="refresh loginFail" id="loginFail" style="display: none;">
                        <div>登录失败，请重试</div>
                        <div class="but">刷新</div>
                    </div>
                </div>
                <div class="appOpen">
                    打开<span>APP</span>--点击左上角扫一扫
                </div>
            </div>

            <p class="text-center text-white">Copyright © 2022 <a target="_blank" href="#">梦祥网络</a>. All right reserved</p>
        </form>
    </div>


</div>
<script type="text/javascript">
    let checkScanInterval;

    $(function () {
        //切换登录选项
        $(".switchBut").on("click", function () {
            $(this).addClass("active").siblings().removeClass("active");
            $("#accountDiv").hide();
            $("#scanDiv").hide();
            let dataShow = $(this).data("show");
            if (dataShow === "scanDiv") {
                if(checkScanInterval!==undefined && checkScanInterval!==null){
                    clearInterval(checkScanInterval)
                }
                requestQrcode();
            }else{
                if(checkScanInterval!==undefined && checkScanInterval!==null){
                    clearInterval(checkScanInterval)
                }
            }
            $("#" + dataShow).show();
        })

        //刷新
        $("#refresh").on("click", function () {
            requestQrcode();
        })
    });

    function loginSuccess(loginResult,companyId){
        setCookie();
        Token.set(loginResult.tokenValue)
        Menu.set(loginResult.navList)
        Menu.setPermission(loginResult.permissionList)
        User.set(loginResult.userInfo)
        localStorage.setItem("companyId",companyId)
        LayerUtil.successMsg("登录成功")
        setTimeout(function () {
            window.location.href = "/admin/home.html"
        }, 1000)
    }

    function requestQrcode(){
        Request.builder()
            .url(ADMIN_SCAN_LOGIN_GENERATE_QRCODE)
            .isToken(false)
            .callback(function (e) {
                if (e.code === "00000") {
                    $("#refresh").hide();
                    $("#scaned").hide();
                    $("#loginSuccess").hide();
                    $("#loginFail").hide();
                    $('#qrcode').empty();
                    $('#qrcode').qrcode({
                        width: 167,
                        height: 167,
                        correctLevel: 2,
                        colorDark : "#000000",//前景色
                        colorLight : "#ffffff",//背景色
                        text: e.data.loginKey
                    });
                    checkScan(e.data.loginKey);
                } else {
                    LayerUtil.failMsg(e.msg ? e.msg : "获取二维码失败")
                }
            }).post();
    }


    //检查是否扫码以及过期
    function checkScan(loginKey) {
        checkScanInterval = setInterval(function () {
            Request.builder()
                .url(ADMIN_SCAN_LOGIN_CHECK_QRCODE)
                .data({"loginKey": loginKey})
                .isToken(false)
                .callback(function (e) {
                    if (e.code === "00000") {
                        if(e.data === "WAIT"){
                            $("#refresh").hide();
                            $("#scaned").hide();
                            $("#loginSuccess").hide();
                            $("#loginFail").hide();
                        }else if(e.data ==="SCAN"){
                            $("#refresh").hide();
                            $("#loginSuccess").hide();
                            $("#loginFail").hide();
                            $("#scaned").show();
                        }else if(e.data ==="LOGIN_SUCCESS"){
                            $("#refresh").hide();
                            $("#scaned").hide();
                            $("#loginFail").hide();
                            $("#loginSuccess").show();
                            loginSuccess(e.loginResult,e.companyId);
                        }else if(e.data ==="LOGIN_FAIL"){
                            $("#refresh").hide();
                            $("#scaned").hide();
                            $("#loginSuccess").hide();
                            $("#loginFail").show();
                        }
                    } else {
                        console.error(e.msg ? e.msg : "二维码过期")
                        $("#scaned").hide();
                        $("#loginSuccess").hide();
                        $("#loginFail").hide();
                        $("#refresh").show();
                        clearInterval(checkScanInterval)
                    }
                }).post();
        }, 1500)
    }
</script>
</body>

</html>